<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>枣课网-学编程来枣课-听的懂得课才是好课</title>
    <meta name="keywords" content="枣课网">
    <meta name="description" content="枣课网、枣课教育">
    <link rel="stylesheet" href="__STATIC__/css/qx_index.css">
    <link rel="stylesheet" href="__STATIC__/css/qct-all.css">
    <link rel="stylesheet" href="__STATIC__/bootstrap-5.1.3/css/bootstrap.css">
    <script src="__STATIC__/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<!--网页头部-->
{include file="index/header" /}
<!--课程介绍头部-->
<div class="container-fluid course-details-top-bgc">
<div class="container-lg">
    <div class="row justify-content-between py-3">
        <div class="col-6">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#" class="path-style">首页</a></li>
                    <li class="breadcrumb-item"><a href="#" class="path-style">Java工程师</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Java工程师</li>
                </ol>
            </nav>
        </div>
        <div class="col-2">
            分享
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-lg-center course-title py-lg-1">{$course.title}</div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-lg-center course-title-sub py-lg-1">{$course.proaname}</div>
    </div>
</div>
</div>
<!--课程说明头部-->
<div class="container-lg">
    <div class="row course-details-top-menu">
        <div class="col-lg-2 text-lg-center">课时：{:get_course_count($course_id)}节</div>
        <div class="col-lg-2 text-lg-center">时长：{:get_course_length($course_id)}</div>
        <div class="col-lg-2 text-lg-center">学习人次：{:get_study_count($course_id)}次观看</div>
        <div class="col-lg-2 text-lg-center">服务期限：-- 年</div>
        <div class="col-lg-2 text-lg-center">价格：{$course.price}元</div>
        <div class="col-lg-2 text-lg-center"><a href="{:url('/course/play', array('id'=>$course_id))}" class="btn btn-danger">开始学习</a></div>
    </div>
</div>
<!--课程介绍-->
<div class="container-lg">
    <div class="row justify-content-center course-details-top-bar">
        <div class="col-lg-1 text-lg-center"><a href="#part1">章节目录</a></div>
        <div class="col-lg-1 text-lg-center"><a href="#part2">课程介绍</a></div>
        <div class="col-lg-1 text-lg-center"><a href="#part3">学习目标</a></div>
        <div class="col-lg-1 text-lg-center"><a href="#part4">课程服务</a></div>
        <div class="col-lg-1 text-lg-center"><a href="#part5">项目演示</a></div>
        <div class="col-lg-1 text-lg-center"><a href="#part6">适合人群</a></div>
    </div>
</div>
<!--课程介绍正文内容开始-->
<div class="container bg-f5 py-3">
    <div class="row">
        <!--left-->
        <div class="col-lg-9">
            <!--章节目录-->
            <div id="part1" class="container-lg">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">章节目录</div>
                </div>
                {volist name="category.catalogs" id="catelogs"}
                <div class="row">
                    {if condition="$catelogs.grade=='0'"}
                    <h6 class="course-content-title" style="margin-top:20px;">{$catelogs.title}</h6>
                    <p class="course-content-desc">{$catelogs.content}</p>
                    {else /}
                    <ul class="course-content-ul" style="margin:0px 0px 5px 20px; padding:0px; height: 25px;">
                        <li>
                            <span class="icon">视频</span>
                            <!--<span class="num">1-1</span>-->
                            <span class="title">{$catelogs.title}</span>
                            <span class="play btn btn-danger">试看8（判断允许试看的可以点击播放）</span>
                        </li>
                    </ul>
                    {/if}
                </div>
                {/volist}
            </div>
            <!--课程介绍-->
            <div id="part2" class="container-lg" style="margin-top:15px;">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">课程介绍</div>
                    <p class="py-2">
                        {$course.content}
                    </p>
                </div>
            </div>
            <!--学习目标-->
            <div id="part3" class="container-lg">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">学习目标</div>
                    <p class="py-2">
                        {$course.learning_objectives}
                    </p>
                </div>
            </div>
            <!--课程服务-->
            <div id="part4" class="container-lg">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">课程服务</div>
                    <p class="py-2">
                        {$course.course_service}
                    </p>
                </div>
            </div>
            <!--项目演示-->
            <div id="part5" class="container-lg">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">项目演示</div>
                    <p class="py-2">
                        {$course.project_demonstration}
                    </p>
                </div>
            </div>
            <!--适合人群-->
            <div id="part6" class="container-lg">
                <div class="row">
                    <div class="col-log-12 text-lg-start course-content-chapter">适合人群</div>
                    <p class="py-2">
                        {$course.suitable_for_people}
                    </p>
                </div>
            </div>
        </div>
        <!--right-->
        <div class="col-lg-3">
            {volist name="teachers" id="teacher"}
            <div class="row">
                <div class="col-lg-3 py-2 text-lg-end"><img src="__ROOT__/uploads/lichun.png" alt="" style="width:50px"></div>
                <div class="col-lg-9 py-2 text-lg-start">
                    <ul style="margin:0px; padding:0px;font-size:14px;">
                        <li>讲师：{$teacher.name}</li>
                        <li>Java全栈工程师</li>
                        <li>级别：{$teacher.avatar}</li>
                    </ul>
                </div>
                <p class="col-12" style="font-size:14px; text-indent: 2em; line-height: 26px;">{$teacher.introduction}</p>
            </div>
            {/volist}
        </div>
    </div>
</div>

<!-- 右侧挂件 -->
{include file="index/right_service" /}
<!-- 底部版权 -->
{include file="index/footer" /}
</body>
</html>